import React, { Component, Fragment } from "react";
import { Form, Button, Avatar, Input, Modal, message } from 'antd';
import { CheckCircleTwoTone, QqOutlined } from '@ant-design/icons';
import { getListData } from '../../api/index'
import PubSub from 'pubsub-js'
import './index.css'
export default class Header extends Component {
  state = { showMessage: true, login: false }
  formRef = React.createRef()
  render () {
    return (
      <Fragment>
        <header className="header-layout">
          <Avatar
            className="imgAvatar"
            size={{ xs: 30, sm: 32, md: 40, lg: 64, xl: 69, xxl: 75 }}
            src="https://gitee.com/wang1778652764/my_pic_public/raw/master/logo.jpg"
          />
          <span className="titleName">梦龙龙Q绑查询系统</span>
          <Button onClick={this.showMessage} className="loginButton" type="primary" shape="round" icon={<CheckCircleTwoTone />} size='normal'>点我查询</Button>
        </header>

        <Modal okText="确认查询" cancelText="取消查询" title="查询信息" visible={this.state.showMessage} onOk={this.getData} onCancel={this.showMessage}>
          <Form
            ref={this.formRef}
            name="basic"
          >
            <Form.Item
              name="qqNumber"
              rules={[{ required: true, message: '必须输入qq号' }]}
            >
              <Input size="large" placeholder="请输入qq号" prefix={<QqOutlined />} type='number' allowClear />
            </Form.Item>
          </Form>
        </Modal>
      </Fragment>
    )
  }
  showMessage = () => {
    this.setState({ showMessage: !this.state.showMessage })
    this.formRef.current.resetFields()
  }
  getData = () => {
    message.loading({ content: '查询中请等待...', key: 'load' });
    getListData(this.formRef.current.getFieldValue().qqNumber).then(res => {
      if (res.data.status === 500) {
        message.error('出现未知错误');
      } else {
        // console.log(res.data);
        PubSub.publish('ListData', { ListData: res.data })
        message.success({ content: '查询成功！', key: 'load', duration: 2 });
        this.setState({ showMessage: !this.state.showMessage })
      }
    })
  }
}
